<template>
	<view class="container" v-if="songInfo != null">
		<!-- 顶部导航 -->
		<view class="topBar">
			<view class="topBar-back" @click="goBack">
				<u-icon name="arrow-leftward" color="#fff" size="44"></u-icon>
			</view>
			<view class="topBar-name">
				<view class="topBar-name-musicName">
					{{songInfo.al.name}}
				</view>
				<view class="topBar-name-authName">
					{{songInfo.ar[0].name}}
					<template v-if="songInfo.ar[1]">
						/{{songInfo.ar[1].name}}
					</template>
					<u-icon name="arrow-right" color="#7e6254" size="26"></u-icon>
				</view>
			</view>
			<view class="topBar-share">
				<u-icon name="share" color="#fff" size="50"></u-icon>
			</view>
		</view>
		<!-- 唱机 -->
		<view class="changji" style="padding-top: 30%;">
			<view :class="['changji-zhigan', $store.state.playState==true?'zg-play':'zg-stop']"></view>
			<view :class="['changji-heijiao', $store.state.playState==true?'rotate':'rotate-stop']">
				<u-image width="360rpx" height="360rpx" :src="songInfo.al.picUrl" shape="circle"></u-image>
			</view>
		</view>
		<!-- 控制器 -->
		<view class="controller">
			<view class="controller-top">
				<!-- 喜欢 -->
				<u-icon name="heart" color="#fff" size="50"></u-icon>
				<!-- 下载 -->
				<u-icon name="download" color="#fff" size="50"></u-icon>
				<!-- 唱 -->
				<u-icon name="mic" color="#fff" size="50"></u-icon>
				<!-- 评论 -->
				<u-icon name="chat" color="#fff" size="50"></u-icon>
				<!-- 操作 -->
				<u-icon name="more-circle" color="#fff" size="50"></u-icon>
			</view>
			<view class="controller-slider">
				<text class="controller-slider-startTime">{{playTime | date('MM:ss')}}</text>
				<u-slider @end='sliderMove(sliderVal)' class="slider" v-model="sliderVal" step='0.01' min="0" max="100"
				 inactive-color='#71625b' active-color='#fff'></u-slider>
				<text class="controller-slider-endTime">{{soneTime | date('MM:ss')}}</text>
			</view>
			<view class="controller-bottom">
				<u-icon name="integral" color="#fff" size="50"></u-icon>
				<u-icon name="skip-back-left" @click="lastClick" color="#fff" size="50"></u-icon>
				<u-icon :name="playIcon" color="#fff" size="80" @click="playBtnClick"></u-icon>
				<u-icon name="skip-forward-right" @click="nextClick" color="#fff" size="50"></u-icon>
				<u-icon name="list-dot" color="#fff" size="50"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 播放进度
				playTime: 0,
				// 歌曲总时间
				soneTime: 0,
				// 音乐进度条的值
				sliderVal: 0,
				// 当前歌单的id
				playListId: 0,
				// 当前歌单所有歌曲的id集合
				playListIdArr: [],
				musicId: 0,
				musicUrl: '',
				// 歌曲信息
				songInfo: null,
				// 用来记录播放状态
				playState: '',
				playIcon: 'pause-circle',
				// 定时器
				timer: null,

			}
		},
		watch: {},
		onLoad(option) {
			this.playListId = option.playListId;
			this.musicId = option.musicId;
			// 获取歌曲信息
			this.getSongDetail(option.musicId);
			// 获取歌单详情
			this.getPlaylistDetail(option.playListId);
			this.playState = this.$store.state.playState;
			// 获取歌曲总时间
			if (this.$store.state.innerAudioContext) {
				this.soneTime = this.$store.state.innerAudioContext.duration * 1000;
			}
			// 歌曲进度
			this.sonePlayTime();
		},
		onReady() {},
		methods: {
			goBack() {
				uni.reLaunch({
					// url: '/pages/playListDetail/playListDetail',
					url: '/pages/look/look'
				});
			},
			// 获取音乐详情
			async getSongDetail(id) {
				let data = await this.myRequest({
					url: this.api.songDetail,
					data: {
						ids: id
					}
				});
				this.songInfo = data.data.songs[0];
				// console.log(this.songInfo)
			},

			// 获取音乐url
			getMusicUrl(id) {
				this.myRequest({
					url: this.api.songUrl,
					data: {
						id: id
					}
				}).then(res => {
					// console.log(res.data.data[0]);
					this.musicUrl = res.data.data[0].url;
				})
			},

			// 歌曲进度
			sonePlayTime() {
				this.timer = setInterval(() => {
					if (this.$store.state.innerAudioContext != null) {
						this.playTime = this.$store.state.innerAudioContext.currentTime * 1000;
						this.sliderVal = (this.playTime / this.soneTime) * 100;
					} else {
						clearInterval(this.timer);
					}
					if (this.playTime == this.soneTime) {
						clearInterval(this.timer);
					}
				}, 1000)
			},

			// 拖动进度条，音乐快进事件
			sliderMove(val) {
				// 滑动滑块，跳转到指定的播放位置
				let startTime = val / 100 * this.soneTime / 1000;
				this.$store.state.innerAudioContext.seek(startTime);
			},

			// 获取歌单详情
			getPlaylistDetail(id) {
				this.myRequest({
					url: this.api.playlistDetail,
					data: {
						id: id
					}
				}).then(res => {
					this.playListIdArr = res.data.playlist.tracks;
					// console.log(this.playListIdArr);
					// this.playListIdArr.forEach(item=>{
					// 	console.log(item.name,item.id)
					// })
				})
			},

			// 切换到上一首歌曲
			lastClick() {
				// 获取目前歌曲在歌单中的索引
				let num;
				this.playListIdArr.forEach((item, index) => {
					if (this.musicId == item.id) {
						num = index
					}
				});
				if (num > 0) {
					num -= 1;
				} else {
					num = this.playListIdArr.length - 1;
				}
				this.musicId = this.playListIdArr[num].id;
				// 更新歌曲信息和url
				this.getSongDetail(this.musicId);
				this.getMusicUrl(this.musicId);
				// 播放音乐
				this.$store.commit('musicInit', this.musicUrl);
			},
			// 切换到下一首歌曲
			nextClick() {
				// 获取目前歌曲在歌单中的索引
				let num;
				this.playListIdArr.forEach((item, index) => {
					if (this.musicId == item.id) {
						num = index
					}
				});
				if (num > this.playListIdArr.length - 1) {
					num = 0;
				} else {
					num += 1;
				}
				this.musicId = this.playListIdArr[num].id;
				// 更新歌曲信息和url
				this.getSongDetail(this.musicId);
				this.getMusicUrl(this.musicId);
				// 播放音乐
				this.$store.commit('musicInit', this.musicUrl);
			},

			// 播放按钮点击事件
			playBtnClick() {
				this.playState = !this.playState;
				if (this.playState) {
					// 播放
					this.$store.commit('upDataPlayState', true);
					this.playIcon = 'pause-circle';
					this.$store.state.innerAudioContext.play();
					this.sonePlayTime();
				} else {
					// 暂停
					this.$store.commit('upDataPlayState', false);
					this.playIcon = 'play-circle';
					this.$store.state.innerAudioContext.pause();
					clearInterval(this.timer);
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		font-size: 14px;
		overflow: hidden;
		padding: 30rpx;
		position: relative;
		background-color: #44231a;

		.topBar {
			width: 100%;
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			color: #fff;

			.topBar-back {
				width: 10%;
				text-align: center;
			}

			.topBar-name {
				width: 80%;
				padding-left: 20rpx;

				.topBar-name-musicName {
					font-size: 40rpx;
				}

				.topBar-name-authName {
					display: flex;
					align-items: center;
					color: #7e6254;
				}
			}

			.topBar-share {
				width: 10%;
				text-align: center;
			}
		}

		// 唱机
		.changji {
			position: relative;

			.changji-zhigan {
				width: 240rpx;
				height: 200rpx;
				position: absolute;
				left: 50%;
				top: 40rpx;
				background: url(../../static/images/zhigan.png) center center no-repeat;
				background-size: 100% 100%;
				z-index: 100;
			}

			.changji-heijiao {
				width: 500rpx;
				height: 500rpx;
				margin: auto;
				background: url(../../static/images/heijiao.png) center center no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// 控制器
		.controller {
			width: 100%;
			margin-top: 40%;

			.controller-top {
				margin-top: 60rpx;
				padding: 0px 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.controller-slider {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;
				color: #fff;

				.controller-slider-startTime {
					width: 10%;
				}

				.controller-slider-endTime {
					width: 10%;
				}

				.slider {
					width: 70%;
				}

			}

			.controller-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;
				padding: 0rpx 40rpx;
			}
		}

		// 旋转动画
		.rotate {
			animation: rotate 8s linear infinite;
			animation-fill-mode: forwards;
			animation-play-state: running; //继续播放动画
		}

		.rotate-stop {
			animation: rotate 8s linear infinite;
			animation-play-state: paused; //暂停动画
			animation-fill-mode: forwards;
		}

		// 播放时支杆的动画
		.zg-play {
			transform: rotate(20deg);
			transform-origin: left top;
			transition: 2s;
		}

		// 暂停时支杆的动画
		.zg-stop {
			transform: rotate(0deg);
			transform-origin: left top;
			transition: 1s;
		}

		@keyframes rotate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	}
</style>
